<template>
  <div class="card">
    <header v-if="$slots.header">
      <slot name="header"></slot>
    </header>

    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  mounted () {
    console.log(this.$slots.header)
  }
}
</script>

<style>
.card header {
  border-bottom: 1px solid #000;
  padding: 0 20px;
}
.card {
  box-shadow: 0 0 20px 2px #ccc;
}
.content {
  padding: 20px;
}
</style>
